<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP/HTTPS 请求和响应信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            height: 100vh;
        }
        .sidebar {
            flex: 1;
            overflow-y: auto;
            border-right: 1px solid #ccc;
        }
        .sidebar-item {
            cursor: pointer;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            transition: background-color 0.3s ease;
        }
        .sidebar-item:hover {
            background-color: #f0f0f0;
        }
        .content {
            flex: 2;
            overflow-y: auto;
            display: none;
            padding: 20px;
        }
        .content p {
            margin: 5px 0;
        }
    </style>
</head>
<body>

<div class="sidebar" id="sidebar">
    <!-- 请求记录列表将在这里显示 -->
</div>

<div class="content" id="content">
    <!-- 请求详情将在这里显示 -->
</div>

<script>
    // 模拟的请求记录数据，可以根据实际情况进行更改
    var requestData = [
        { method: "GET", url: "http://example.com/api/data", status: 200, response: "Some data" },
        { method: "POST", url: "https://api.example.com/login", status: 401, response: "Unauthorized" },
        { method: "GET", url: "http://example.com/api/users", status: 200, response: "User data" }
        // 可以继续添加更多的请求记录对象
    ];

    // 获取侧边栏和内容区域的元素
    var sidebar = document.getElementById("sidebar");
    var content = document.getElementById("content");

    // 将请求记录填充到侧边栏中
    requestData.forEach(function(request, index) {
        var listItem = document.createElement("div");
        listItem.classList.add("sidebar-item");
        listItem.textContent = `${request.method} ${request.url} - Status: ${request.status}`;
        listItem.addEventListener("click", function() {
            showRequestDetails(request);
        });
        sidebar.appendChild(listItem);
    });

    // 显示点击记录的详情信息
    function showRequestDetails(request) {
        content.innerHTML = `
      <p><strong>Method:</strong> ${request.method}</p>
      <p><strong>URL:</strong> ${request.url}</p>
      <p><strong>Status:</strong> ${request.status}</p>
      <p><strong>Response:</strong> ${request.response}</p>
    `;
        content.style.display = "block";
    }

    // 添加拖动调整大小功能
    var startX, startWidth;
    sidebar.addEventListener("mousedown", function(e) {
        startX = e.pageX;
        startWidth = parseInt(document.defaultView.getComputedStyle(sidebar).width, 10);
        document.addEventListener("mousemove", dragSidebar);
        document.addEventListener("mouseup", stopDrag);
    });

    function dragSidebar(e) {
        sidebar.style.width = (startWidth + e.pageX - startX) + "px";
        content.style.width = "calc(100% - " + sidebar.offsetWidth + "px)";
    }

    function stopDrag() {
        document.removeEventListener("mousemove", dragSidebar);
        document.removeEventListener("mouseup", stopDrag);
    }
</script>

</body>
</html>
